<template>
  <div
    ref="myMap"
    :style="{ width: width, height: height }"
    class="container"
  >
  </div>
</template>
<script>
export default {
  name: 'TMapView',
  props: {
    /**
     * 地图宽度
     */
    width: {
      type: String,
      default: '100%',
    },
    /**
     * 地图高度
     */
    height: {
      type: String,
      default: '40vh',
    },
    /**
     * 地图配置
     */
    config: {
      type: Object,
      default: () => {
        return {}
      },
    },
    /**
     * 点标记&文本标记
     */
    multiMarker: {
      type: Array,
      default: () => {
        return []
      },
    },
    /**
     * 是否开启Marker点击事件
     */
    markerClick: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否显示点标记信息
     */
    markerInfoShow: {
      type: Boolean,
      default: false,
    },
    /**
     * 轨迹回放
     */
    trajectory: {
      type: Object,
      default: () => {
        return {}
      },
    },
    /**
     * 折线
     */
    multiPolyline: {
      type: Array,
      default: () => {
        return []
      },
    },
    /**
     * 多边形
     */
    multiPolygon: {
      type: Array,
      default: () => {
        return []
      },
    },
    /**
     * 圆形
     */
    multiCircle: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      map: null,
      resultConfig: {
        // 地图配置
        lat: 28.69959, // 纬度
        lng: 116.696714, // 经度
        zoom: 10, // 地图缩放级别,支持3～20。
        rotation: 0, // 地图在水平面上的旋转角度，顺时针方向为正，默认为0。
        pitch: 0, // 地图俯仰角度，取值范围为0~80，默认为0。
        offset: {
          // 地图中心与容器的偏移量，Object的格式为 {x:Number, y:Number}（右方下方为正，单位为像素）。
          x: 0,
          y: 0,
        },
      },
      multiMarkers: null, // 多个点标记对象 {multiMarkerid:multiMarker对象}
    }
  },
  watch: {
    'config.lat': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.resultConfig.lat = newVal
          if (newVal != oldVal && this.map) {
            this.map.setCenter(new TMap.LatLng(this.resultConfig.lat, this.resultConfig.lng))
          }
        }
      },
      immediate: true,
    },
    'config.lng': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.resultConfig.lng = newVal
          if (newVal != oldVal && this.map) {
            this.map.setCenter(new TMap.LatLng(this.resultConfig.lat, this.resultConfig.lng))
          }
        }
      },
      immediate: true,
    },
    'config.zoom': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.resultConfig.zoom = newVal
          if (newVal != oldVal && this.map) {
            this.map.setZoom(newVal)
          }
        }
      },
      immediate: true,
    },
    'config.rotation': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.resultConfig.rotation = newVal
          if (newVal != oldVal && this.map) {
            this.map.setRotation(newVal)
          }
        }
      },
      immediate: true,
    },
    'config.pitch': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.resultConfig.pitch = newVal
          if (newVal != oldVal && this.map) {
            this.map.setPitch(newVal)
          }
        }
      },
      immediate: true,
    },
    'config.offset': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.resultConfig.offset = newVal
          if (newVal != oldVal && this.map) {
            this.map.setOffset(newVal)
          }
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.initTMap()
  },
  methods: {
    /**
     * 初始化地图
     */
    initTMap() {
      this.map = new TMap.Map(this.$refs.myMap, {
        center: new TMap.LatLng(this.resultConfig.lat, this.resultConfig.lng), // 地图的中心地理坐标
        zoom: this.resultConfig.zoom, // 设置地图缩放级别
        rotation: this.resultConfig.rotation, // 设置地图旋转角度
        pitch: this.resultConfig.pitch, // 设置俯仰角度
        offset: this.resultConfig.offset,
      })

      this.loadMultiMarker()
      this.loadTrajectory()
      this.loadMultiPolyline()
      this.loadMultiPolygon()
      this.loadMultiCircle()
    },
    /**
     * 加载 点标记
     */
    loadMultiMarker() {
      if (!this.multiMarker || this.multiMarker.length == 0) {
        return
      }
      this.multiMarkers = {}
      let infoWindow
      if (this.markerInfoShow) {
        infoWindow = new TMap.InfoWindow({
          map: this.map,
          position: new TMap.LatLng(39.984104, 116.307503),
          offset: { x: 0, y: -22 }, //设置信息窗相对position偏移像素
        })
        infoWindow.close() //初始关闭信息窗关闭
      }
      this.multiMarker.forEach((v) => {
        let styles = {}
        if (v.styles && v.styles.length > 0) {
          v.styles.forEach((vStyle) => {
            styles[vStyle.id] = new TMap.MarkerStyle({
              width: vStyle.width ? vStyle.width : 25,
              height: vStyle.height ? vStyle.height : 35,
              anchor: vStyle.anchor ? vStyle.anchor : { x: 16, y: 32 },
              src: vStyle.src ? vStyle.src : 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
            })
          })
        } else {
          styles = {
            marker: new TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: { x: 16, y: 32 },
              src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
            }),
          }
        }

        if (v.geometries && v.geometries.length > 0) {
          v.geometries.forEach((vGeometries) => {
            vGeometries.styleId = vGeometries.styleId ? vGeometries.styleId : 'marker'
            vGeometries.position = new TMap.LatLng(vGeometries.position.lat, vGeometries.position.lng)
          })
        }

        let multiMarkerObj = new TMap.MultiMarker({
          id: v.id,
          map: this.map, // 指定地图容器
          // 样式定义
          styles: styles,
          // 数据
          geometries: v.geometries,
        })

        if (this.markerClick) {
          multiMarkerObj.on('click', (evt) => {
            let obj = {
              id: evt.target.id,
              properties: evt.geometry.properties,
              latLng: evt.latLng,
            }
            this.$emit('markerClick', obj)
            if (this.markerInfoShow) {
              infoWindow.setPosition(new TMap.LatLng(evt.latLng.lat, evt.latLng.lng)) //设置信息窗位置
              infoWindow.setContent(evt.geometry.properties.content) //设置信息窗内容
              infoWindow.open() //打开信息窗
            }
          })
        }

        this.multiMarkers[v.id] = multiMarkerObj
      })
    },
    /**
     * 加载轨迹
     */
    loadTrajectory() {
      if (!this.trajectory || !this.trajectory.path || this.trajectory.path.length == 0) {
        return
      }
      let path = this.trajectory.path.map((v) => {
        return new TMap.LatLng(v.lat, v.lng)
      })
      let polylineLayer = new TMap.MultiPolyline({
        map: this.map, // 绘制到目标地图
        // 折线样式定义
        styles: {
          style_blue: new TMap.PolylineStyle({
            color: '#3777FF', //线填充色
            width: 4, //折线宽度
            borderWidth: 2, //边线宽度
            borderColor: '#FFF', //边线颜色
            lineCap: 'round', //线端头方式
          }),
        },
        geometries: [
          {
            styleId: 'style_blue',
            paths: path,
          },
        ],
      })

      let marker = new TMap.MultiMarker({
        map: this.map,
        styles: {
          'car-down': new TMap.MarkerStyle({
            width: 40,
            height: 40,
            anchor: {
              x: 20,
              y: 20,
            },
            faceTo: 'map',
            rotate: 180,
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
          }),
          start: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
          }),
          end: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
          }),
        },
        geometries: [
          {
            id: 'car',
            styleId: 'car-down',
            position: path[0],
          },
          {
            id: 'start',
            styleId: 'start',
            position: path[0],
          },
          {
            id: 'end',
            styleId: 'end',
            position: path[path.length - 1],
          },
        ],
      })
      marker.moveAlong(
        {
          car: {
            path,
            speed: this.trajectory.speed ? this.trajectory.speed : 250,
          },
        },
        {
          autoRotation: true,
        }
      )
    },
    /**
     * 加载折线
     */
    loadMultiPolyline() {
      if (!this.multiPolyline || this.multiPolyline.length == 0) {
        return
      }
      this.multiPolyline.forEach((v) => {
        let styles = {}
        if (v.styles && v.styles.length > 0) {
          v.styles.forEach((vStyle) => {
            styles[vStyle.id] = new TMap.PolylineStyle({
              color: vStyle.color ? vStyle.color : '#3777FF', // 线填充色
              width: vStyle.width ? vStyle.width : 6, // 折线宽度
              borderWidth: vStyle.borderWidth ? vStyle.borderWidth : 5, // 边线宽度
              borderColor: vStyle.borderColor ? vStyle.borderColor : '#FFF', //边线颜色
              lineCap: vStyle.lineCap ? vStyle.lineCap : 'round', //线端头方式
            })
            if (vStyle.dashed) {
              styles[vStyle.id].dashArray = [10, 10] // 虚线展示方式
            }
          })
        } else {
          styles = {
            style_blue: new TMap.PolylineStyle({
              color: '#3777FF', // 线填充色
              width: 6, // 折线宽度
              borderWidth: 5, // 边线宽度
              borderColor: '#FFF', //边线颜色
              lineCap: 'round', //线端头方式
            }),
          }
        }

        if (v.geometries && v.geometries.length > 0) {
          v.geometries.forEach((vGeometries) => {
            vGeometries.styleId = vGeometries.styleId ? vGeometries.styleId : 'style_blue'
            vGeometries.paths = vGeometries.paths.map((LatLng) => {
              return new TMap.LatLng(LatLng.lat, LatLng.lng)
            })
          })
        }

        new TMap.MultiPolyline({
          id: v.id,
          map: this.map, // 指定地图容器
          // 样式定义
          styles: styles,
          // 数据
          geometries: v.geometries,
        })
      })
    },
    /**
     * 加载多边形
     */
    loadMultiPolygon() {
      if (!this.multiPolygon || this.multiPolygon.length == 0) {
        return
      }
      this.multiPolygon.forEach((v) => {
        let styles = {}
        if (v.styles && v.styles.length > 0) {
          v.styles.forEach((vStyle) => {
            styles[vStyle.id] = new TMap.PolygonStyle({
              color: vStyle.color ? vStyle.color : 'rgba(41,91,255,0.16)', // 面填充色
              showBorder: true, // 是否显示拔起面的边线
              borderColor: vStyle.borderColor ? vStyle.borderColor : 'rgba(41,91,255,1)', //边线颜色
            })
          })
        } else {
          styles = {
            polygon: new TMap.PolygonStyle({
              color: 'rgba(41,91,255,0.16)', // 面填充色
              showBorder: true, // 是否显示拔起面的边线
              borderColor: 'rgba(41,91,255,1)', //边线颜色
            }),
          }
        }

        if (v.geometries && v.geometries.length > 0) {
          v.geometries.forEach((vGeometries) => {
            vGeometries.styleId = vGeometries.styleId ? vGeometries.styleId : 'polygon'
            vGeometries.paths = vGeometries.paths.map((LatLng) => {
              if (LatLng instanceof Array) {
                LatLng = LatLng.map((ll) => {
                  return new TMap.LatLng(ll.lat, ll.lng)
                })
                return LatLng
              } else {
                return new TMap.LatLng(LatLng.lat, LatLng.lng)
              }
            })
            if (vGeometries.properties && vGeometries.properties.title) {
              let position
              if(vGeometries.paths[0] instanceof Array) {
                position = TMap.geometry.computeCentroid(vGeometries.paths[0])
              }else {
                // 计算多边形形心
                position = TMap.geometry.computeCentroid(vGeometries.paths)
              }
              
              // 在形心位置添加文本标注
              new TMap.MultiLabel({
                map: this.map,
                styles: {
                  building: new TMap.LabelStyle({
                    color: '#3777FF', //颜色属性
                    size: 20, //文字大小属性
                    alignment: 'center', //文字水平对齐属性
                    verticalAlignment: 'middle', //文字垂直对齐属性
                  }),
                },
                geometries: [
                  {
                    styleId: 'building',
                    position: position,
                    content: vGeometries.properties.title,
                  },
                ],
              })
            }
          })
        }

        new TMap.MultiPolygon({
          id: v.id,
          map: this.map, // 指定地图容器
          // 样式定义
          styles: styles,
          // 数据
          geometries: v.geometries,
        })
      })
    },
    /**
     * 加载圆形
     */
    loadMultiCircle() {
      if (!this.multiCircle || this.multiCircle.length == 0) {
        return
      }
      this.multiCircle.forEach((v) => {
        let styles = {}
        if (v.styles && v.styles.length > 0) {
          v.styles.forEach((vStyle) => {
            styles[vStyle.id] = new TMap.CircleStyle({
              color: vStyle.color ? vStyle.color : 'rgba(41,91,255,0.16)', // 面填充色
              showBorder: true, // 是否显示拔起面的边线
              borderColor: vStyle.borderColor ? vStyle.borderColor : 'rgba(41,91,255,1)', //边线颜色
            })
          })
        } else {
          styles = {
            circle: new TMap.PolygonStyle({
              color: 'rgba(41,91,255,0.16)', // 面填充色
              showBorder: true, // 是否显示拔起面的边线
              borderColor: 'rgba(41,91,255,1)', //边线颜色
            }),
          }
        }

        if (v.geometries && v.geometries.length > 0) {
          v.geometries.forEach((vGeometries) => {
            vGeometries.styleId = vGeometries.styleId ? vGeometries.styleId : 'circle'
            vGeometries.center = new TMap.LatLng(vGeometries.center.lat, vGeometries.center.lng)
            if (vGeometries.properties && vGeometries.properties.title) {
              // 在形心位置添加文本标注
              new TMap.MultiLabel({
                map: this.map,
                styles: {
                  building: new TMap.LabelStyle({
                    color: '#3777FF', //颜色属性
                    size: 20, //文字大小属性
                    alignment: 'center', //文字水平对齐属性
                    verticalAlignment: 'middle', //文字垂直对齐属性
                  }),
                },
                geometries: [
                  {
                    styleId: 'building',
                    position: vGeometries.center,
                    content: vGeometries.properties.title,
                  },
                ],
              })
            }
          })
        }

        new TMap.MultiCircle({
          id: v.id,
          map: this.map, // 指定地图容器
          // 样式定义
          styles: styles,
          // 数据
          geometries: v.geometries,
        })
      })
    },
  },
  destroyed() {
    // 销毁地图
    this.map.destroy()
  }
}
</script>
<style scoped>
.container {
  text-align: start;
}
.container >>> .rotate-circle {
  height: auto;
}
</style>